{% extends "xadmin/base_site.html" %}
{% load i18n %}
{% load url from future %}
{% load xadmin_tags %}
{% load crispy_forms_tags %}

{% block breadcrumbs %}
{% if account_view %}
<ul class="breadcrumb">
  <link href="/websys/static/xadmin/vendor/bootstrap-table/css/bootstrap-table.min.css" type="text/css" media="screen" rel="stylesheet" />
  <link href="/websys/static/xadmin/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" type="text/css" media="screen" rel="stylesheet" />
<li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li class="active"> {{ title }} </li>
</ul>
{% else %}
<ul class="breadcrumb">
  <li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li>
    {% if has_view_permission %}
    <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
    {% else %}{{ opts.verbose_name_plural|capfirst }}{% endif %}
  </li>
  <li><a href="{% url opts|admin_urlname:'change' original.pk %}">{{ original|truncatewords:"18" }}</a></li>
  <li class="active">{% trans 'Change password' %}</li>
</ul>
{% endif %}
{% endblock %}

{% block content-nav %}
{% endblock %}
{% block content %}
<!--页面设计在这儿....{{ serverval }}-->
    <style>
    .tb_tr{height: 50px; border:gainsboro 1px  double;}
    .tb_td{height: 50px; border: gainsboro 1px double; width:80px;}
    .div_cb{width:100px; height: 50px; float: left;}
    </style>
    <table id="tb_main" style="width: 100%" >
        <tr class="tb_tr" id="tr_effect" hidden="true">
            <td class="tb_td">是否滚动：<input type="hidden" id="hid_id" value=""></td>
            <td><input type="text" id="txt_effect" maxlength="20" value="1"><span>注:0为不滚的,1为滚动</span></td>
        </tr>
<!--     <tr class="tb_tr" id="tr_day" >
            <td class="tb_td">内容：</td>
            <td><input type="text" id="txt_content" maxlength="50" style="width: 400px;">(50个字以内)</td>
        </tr> -->

    <tr class="tb_tr" id="tr_time" >
            <td class="tb_td">滚动间隔(秒)：</td>
            <td><input type="text" id="txt_time" maxlength="5" value=""></td>
        </tr>
        <tr class="tb_tr" id="tr_day" >
            <td class="tb_td">有效日期：</td>
            <td>
                <div class="input-append date" id="datetimepicker_1" data-date="" data-date-format="yyyy-mm-dd hh:ii">
                <input size="16" type="text" id="datetimeStart" value="请选择时间" readonly class="form_datetime">
                <span class="add-on"><i class="icon-th"></i></span></div> 
                <!-- <input type="text" id="day_0" class="datetimepicker" placeholder="请选择日期" /> -->
                到
                <div class="input-append date" id="datetimepicker_2" data-date="" data-date-format="yyyy-mm-dd hh:ii">
                <input size="16" type="text" id="datetimeEnd" value="请选择时间" readonly class="form_datetime">
                <span class="add-on"><i class="icon-th"></i></span></div> 
            </td>
        </tr>
        <tr class="tb_tr" id="tr_contents" >
            <td class="tb_td">内容：</td>
        <td><textarea id="txt_content" style="overflow:auto;" rows="10" cols="40"></textarea></td>
        </tr>
        <tr class="tb_tr">
            <td class="tb_td">服务器：</td>
            <td>
                {% for item in htmldata.apps %}
                            <div class="div_cb"><input type="checkbox" id="cb_{{ item.pf }}" value="{{ item.pf }}">{{ item.name }}</div>
                    {% endfor %}
            </td>
        </tr>

    <tr class="tb_tr">
            <td class="tb_td"></td>
            <td><label id="la_link"> {{links}}</label>&nbsp;&nbsp;<input type="button" id="bt_copy" value="发布" onclick="toSend()"></td>
        </tr>
    <tr class="tb_tr" style="background-color: #1da7ee;">
            <td class="tb_td">公告列表</td>
            <td><label id="la_link"> {{links}}</label>&nbsp;&nbsp;<input type="button" id="bt_refresh" value="刷新" onclick="toRefresh()">
            &nbsp;&nbsp;<input type="button" id="bt_add" value="新增" onclick="toAdd()">
            </td>
        </tr>
    <tr class="tb_tr">
            <td class="tb_td" colspan="2">
                <table data-toggle="table" data-height="100%"  data-pagination="true" id="table_report" style="width:90%;">
                     <!--thead>
                        <tr>
                            <th  data-field="uid">账号ID</th>
                            <th  data-field="roleid">角色ID</th>
                            <th  data-field="nick">玩家呢称</th>
                            <th  data-field="server">服务器</th>
                            <th  data-field="recharge">充值金额</th>
                            <th  data-field="retime">充值时间</th>

                        </tr>
                    </thead-->
                </table>
            </td>
    </tr>
    </table>
<script type="text/javascript" src="/websys/static/xadmin/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script type="text/javascript" src="/websys/static/xadmin/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/websys/static/xadmin/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table-locale-all.min.js"></script>
    <script>
    var tb_title_obj={
        'share':['金额'],
        'table':['房数']
    };

    // var pagType='{{ htmldata.type }}';
    // var dateType=new Array('year','month','day');
    // var dateName={'year':'年份','month':'月份','day':'日期'};
    // var curType='day';
    // // function setType(val)
    // {//alert(val);
    //     for(var ii=0;ii<dateType.length;ii++)
    //     {
    //         if(ii==val)
    //         {
    //             $('#tr_'+dateType[val]).css('display', '');
    //         }
    //         else
    //         {
    //             $('#tr_'+dateType[ii]).css('display', 'none');
    //         }
    //         curType=dateType[val];
    //     }
    // }
    // function setDay()
    // {//alert('month');
    //     for(var ii=0;ii<2;ii++) {
    //         $("#day_"+ii).datepicker({
    //             language: "zh-CN",
    //             autoclose: true,//选中之后自动隐藏日期选择框
    //             clearBtn: true,//清除按钮
    //             //todayBtn: true,//今日按钮
    //             pickTime:true,
    //             startView: 'days',
    //             maxViewMode: 'days',
    //             minViewMode: 'days',
    //             Format: "yyyy-mm-dd hh:mm:ss"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
    //         });
    //         $("#day_"+ii ).datepicker( 'setDate' , new Date());
    //     }
    // }
var date = new Date();
$('#datetimepicker_1').datetimepicker({
    format: 'yyyy-mm-dd hh:ii',
    weekStart:0,
    startDate: new Date(),
    startView:2,
    minView:0,
    todayHighlight:true,
    language:'zh-CN',
    forceParse:true,
    minuteStep:1,
    pickerPosition:'bottom-right',
    autoclose:1,

});
$('#datetimepicker_2').datetimepicker({
    format: 'yyyy-mm-dd hh:ii',
    weekStart:0,
    startDate: new Date(),
    startView:1,
    minView:0,
    todayHighlight:true,
    language:'zh-CN',
    forceParse:true,
    minuteStep:1,
    pickerPosition:'bottom-right',
    autoclose:1,

});

    $(function () {
        //setYear();
        //setMonth();
        // setDay();

        // $(".date-picker").datepicker({
        //         language: "zh-CN",
        //         autoclose: true,
        //     });
        toRefresh();
    });

    function toAdd()
    {
        window.location='/xadmin/cbyx_systemdata/news/';
    }

    function toSend() {
        var txt_time=$('#txt_time').val(),t_con=$('#txt_content').val(),txt_effect=$('#txt_effect').val();
        //获取服务器
        var t_pf = '';
        var start_time=$('#datetimeStart').val();
        var end_time=$('#datetimeEnd').val();
        $("#tb_main input[type='checkbox']").each(function(i){
                if(this.checked) {
                    //alert(this.id);
                    if(t_pf!='')
                    {
                        t_pf+=',';
                    }
                    t_pf+=this.value;
                }
             });
        if(txt_time=='' || t_con=='' || txt_effect=='')
        {
            alert('滚动时间，内容，是否滚动不能为空');
            return;
        }
        if(t_pf=='')
        {
            alert('请选择服务器');
            return;
        }
        //var t0=$("#date_0").datepicker("getDate").toLocaleString();//获取
        //$(".datepicker").datepicker("setDate", '2014-01-25');//设置
        //var t0 = $("#" + curType + "_0").val(), t1 = $("#" + curType + "_1").val();

        //alert(t0+"-"+t1+"开发中。"+t2);//data-url="/websys/static/data2.txt"
        var turl = '/xadmin/ajax_cbyx_systemdata/addnews';//?date='+t0+','+t1+'&type='+t2;
        if (start_time == '' || end_time == '') {
            alert('日期不能为空');
            return;
        }
        var cur_id=$('#hid_id').val();
        var tmp_obj={"id":cur_id,"effect":txt_effect, "con":t_con,"time":txt_time,"pf":t_pf,"date":start_time+","+end_time};
        //alert(start_time);
        $.post(turl, tmp_obj, function(result){
            //alert(result.code);return;
			if(result.code == 0)
			{    
                alert(result.msg)
                toRefresh();
			}else
			{
				alert('发布失败:'+result.code);
			}
		 }, "json");
    }
    function toRefresh()
    {
        var t_pf='';
        var start_times=$('#datetimeStart').val();
        var end_times=$('#datetimeEnd').val();
        //var t0=$("#date_0").datepicker("getDate").toLocaleString();//获取
        //$(".datepicker").datepicker("setDate", '2014-01-25');//设置
        //var t0=$("#"+curType+"_0").val(),t1=$("#"+curType+"_1").val();

        //alert(t0+"-"+t1+"开发中。"+t2);//data-url="/websys/static/data2.txt"
        var turl='/xadmin/ajax_cbyx_systemdata/getnews';//?date='+t0+','+t1+'&type='+t2;
        $('#table_report').bootstrapTable('destroy'); // 显示之前，先把当前表格销毁
        $('#table_report').bootstrapTable({
            //search: true,
            locale:'zh-CN',//中文支持
            sortable: true,      //是否启用排序
            //showFooter:true,
            sortName:'date',
            //showRefresh: true,
            pagination: true,//是否开启分页（*）
             pageNumber:1,//初始化加载第一页，默认第一页
             pageSize: 10,//每页的记录行数（*）
              pageList: [10,20,50],//可供选择的每页的行数（*）
            method: "get",         // 经过测试，只有post方法能发给后端的helloWorld.do
            showExport: true,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.
            //sidePagination: 'server',
            queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
　　// 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams: function (params) {
                return {
                    //meterID: $('#meterid').val(),
                    pageSize: params.pageSize,
                    //offset: params.offset,
                    pageNumber:params.pageNumber,
                    sortOrder: params.order,
                    sort: params.sort, //排序列名
                    date: start_times+','+end_times,
                    pf:t_pf
                }
            },

            url:turl,   // 发送到后端helloWorld.do，由helloWorld.do返回json字符串，
                                    // 必须是列表形式，例如：[{"name":"aaa","id":"kkk"},{...},...]
            columns:[{              // 定义过滤的字符串，只有columns里写的才显示，其它不显示
                field: 'effect',        // 这里是需要显示的字段的key,也就是helloWorld.do返回json字符串
                                    // 中必须有这个key,以及对应的value
                title: '是否滚动'         // 在页面显示的该列的标题信息
                //footerFormatter:'合计'
              },
              {
                field: 'content',
                title: '内容',

              },
                {
                    field: 'time',
                    title: '滚动时间',
                },
                {
                    field: 'server',
                    title: '服务器'
                },
                {
                    field: 'start_time',
                    title: '开始时间'
                },
                {
                    field: 'end_time',
                    title: '结束时间'
                },
                {
                    field: 'opper',
                    title: '操作',
                    events: operateEvents,
                    formatter: operateFormatter

                },
            ],

        });


        /*
        $table.bootstrapTable('load', data);
        $('#table_report').bootstrapTable({
                url: 'http://127.0.0.1:8080/xadmin/report/recharge?date='+t0+','+t1+'&type='+t2
            });*/
    }
    //操作列
    function operateFormatter(value, row, index) {
        return '<button type="button" class="mod btn btn-default  btn-sm" style="margin-right:15px;">修改</button> ' + '<button type="button" class="del btn btn-default  btn-sm" style="margin-right:15px;">滚动状态</button>';
             return [
                 '<button type="button" class="RoleOfA btn btn-default  btn-sm" style="margin-right:15px;">确认</button>'
             ].join('');
         }
    window.operateEvents = {
        //修改
             'click .mod': function (e, value, row, index) {
            //window.open("http://127.0.0.1:8000/xadmin/userdata/detaile"+'?'+'value='+row.userid+'&'+'server='+row.server)
                 //window.location='/xadmin/ajax_userdata/info?uid='+row.userid+'&sid='+cur_pf;
                 $('#hid_id').val(row.id);
                 $('#txt_effect').val(row.effect);
                 $('#txt_content').val(row.content);
                 $('#txt_time').val(row.time);
                 $("#datetimeStart").val(row.start_time);
                 $("#datetimeEnd").val(row.end_time);
                 var cur_ser=row.server;
                 $("#tb_main input[type='checkbox']").each(function(i){
                     this.checked=false;
                     if(cur_ser.indexOf(this.value)>-1)
                     {
                         this.checked=true;
                     }

                 });
           },
        //删除
             'click .del': function (e, value, row, index) {
                if(confirm('确定要更改公告滚动状态吗?'))
                {
                    var turl = '/xadmin/ajax_cbyx_systemdata/change_effect';
                    var tmp_obj={'id':row.id,'serial':row.serial,'effect':row.effect};
                    $.post(turl, tmp_obj, function(result){
                        //alert(result.code);return;
                        if(result.code == 0)
                        {   
                            alert(result.msg);
                            toRefresh();
                        }else
                        {
                            alert(result.msg+result.code);
                        }
                     }, "json");
                }
             }

         }
    </script>
{% endblock %}